<template>
  <div class="container">
    <!-- <catch-table :form-create="formCreate" v-bind="table" /> -->
    <el-card class="box-card">
      <el-button type="zz5" @click="add">新增关键词</el-button>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-card>
            <!-- 						<div v-for="(item,index) in classinfo" :key="index" class="taqinfo">
              <el-link type="primary" @click="taqclass(item)">{{item.vocation_name}}</el-link>
            </div> -->

            <el-tree :data="data" :props="defaultProps" accordion :highlight-current=true
                     @node-click="handleNodeClick"
            >
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="tag-management-area">


          <el-card class="tag-card">
            <!-- 标签展示区 -->
            <div class="tag-display-section">
              <div class="tag-container">
                <el-tag v-for="(tag,index) in sys" :key="index" closable class="custom-tag"
                        @close="handleClose(tag)"
                >
                  {{ tag.vocation_name }}
                </el-tag>
              </div>

              <!-- 标签输入区 -->
              <div class="tag-input-section" v-if="parent_id !== 0">
                <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue"
                          class="input-new-tag" size="small" placeholder="输入标签内容"
                          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"
                />
                <el-button v-else class="button-new-tag" size="small" icon="el-icon-plus"
                           @click="showInput"
                >
                  添加标签
                </el-button>
              </div>
            </div>
          </el-card>

          <el-card class="tag-card1">
            <!-- 标签展示区 -->
            <div class="tag-display-section">
              <div class="tag-container">
                <el-tag v-for="(tag,index) in dynamicTags" :key="index" closable class="custom-tag"
                        @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>

              <!-- 标签输入区 -->

            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-dialog :visible.sync="adddialogVisible" v-bind="$attrs" v-on="$listeners" title="Dialog Titile">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-row>
            <el-form-item label="父级栏目" prop="parent_id">
              <el-cascader v-model="formData.parent_id" :options="data" :props="{ checkStrictly: true,    label: 'vocation_name',
    value: 'id',
    children: 'children' }" :style="{width: '100%'}" placeholder="请选择父级栏目" clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label-width="120px" label="关键词名称：" prop="vocation_name">
              <el-input v-model="formData.vocation_name" placeholder="请输入关键词名称：" clearable
                        :style="{width: '100%'}"
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button>取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import {
  method
} from 'lodash'

export default {
  // mixins: [renderTable],
  data() {
    return {
      adddialogVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      classinfo: [],
      sys: [],
      cus: [],
      data: [],
      parent_id: 0,
      defaultProps: {
        children: 'children',
        label: 'vocation_name'
      },
      formData: {
        parent_id: [],
        vocation_name: undefined
      },
      rules: {
        parent_id: [{
          required: true,
          type: 'array',
          message: '请至少选择一个父级栏目',
          trigger: 'change'
        }],
        vocation_name: [{
          required: true,
          message: '请输入关键词名称：',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    handelConfirm() {
      const parent_ids = this.formData.parent_id?.length > 0 ?
        this.formData.parent_id[this.formData.parent_id.length - 1] :
        0

      this.$http({
        url: '/SysVocation/save',
        method: 'post',
        data: {
          vocation_name: this.formData.vocation_name,
          parent_id: parent_ids
        }
      }).then(r => {
        console.log(r)
        if (r.code == 10000) {
          this.$message({
            message: '添加完成',
            type: 'success'
          })
          this.getclassinfo()
          this.adddialogVisible = false
          this.formData.parent_id = []
          this.formData.vocation_name = ''
        }
      })
    },

    add() {
      this.adddialogVisible = true
    },

    // 获取3层
    async handleNodeClick(e) {
      console.log(e)
      this.parent_id = (typeof e === 'object' && e !== null && 'id' in e) ? e.id : e
      let {
        data
      } = await this.$http({
        url: '/SysVocation/index3',
        method: 'post',
        data: {
          parent_id: this.parent_id
        }
      })

      console.log(data)
      this.sys = data.sys
      this.cus = data.cus

    },
    async getclassinfo() {
      let {
        data
      } = await this.$http({
        url: 'SysVocation/index12',
        method: 'post'
      })

      console.log(666, data)
      this.data = data
    },

    handleClose(tag) {
      console.log(tag)
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);

      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http({
          url: '/SysVocation/del?id=' + tag.id,
          method: 'post'
        }).then(r => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleNodeClick(this.parent_id)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue && this.parent_id != 0) {
        this.$http({
          url: 'SysVocation/save',
          method: 'POST',
          data: {
            parent_id: this.parent_id,
            vocation_name: inputValue
          }
        })
      }
      this.inputVisible = false
      this.inputValue = ''

      this.handleNodeClick(this.parent_id)
    },

    taqclass(e) {
      this.getclassinfo2(e.id)
    },

    async getclassinfo2(e) {
      let {
        data
      } = await this.$http({
        url: '/SysVocation/indexByPid?parent_id=' + e,
        method: 'post'
      })
      console.log(data)
      this.dynamicTags = data.map(item => item.vocation_name)
    }

  },

  created() {
    this.getclassinfo()
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
}

.box-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.taqinfo {
  line-height: 30px;
}

.grid-content {
  line-height: 20px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 标签间距 */
  padding: 8px 0;
  /* 上下间距 */
}

/* 自定义标签样式 */
.custom-tag {
  width: 100px;
  /* 固定宽度 */
  height: 32px;
  /* 固定高度 */
  line-height: 30px;
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
  margin: 4px 0;
  /* 上下间距 */
  padding: 0 8px;
  /* 内边距 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s;
}

/* 鼠标悬停效果 */
.custom-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 卡片样式调整 */


.tag-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tag-card1 {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}


.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.custom-tag {
  width: 120px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  padding: 0 10px;
  border-radius: 4px;
  background-color: #f0f9ff;
  border-color: #d9ecff;
  color: #409eff;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(32, 160, 255, 0.2);
}

.custom-tag >>> .el-tag__close {
  color: #409eff;
  margin-left: 5px;
}

.custom-tag >>> .el-tag__close:hover {
  color: white;
  background-color: #409eff;
}

.tag-input-section {
  display: flex;
  align-items: center;
}

.input-new-tag {
  width: 120px;
  margin-right: 10px;
}

.button-new-tag {
  color: #409eff;
  border-color: #d9ecff;
  background-color: #f0f9ff;
}

.button-new-tag:hover {
  background-color: #409eff;
  color: white;
}

/* 基础树样式 */
.el-tree {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 10px;
}

/* 树节点样式 */
.el-tree-node {
  margin: 4px 0;
}

.el-tree-node__content {
  height: 36px;
  line-height: 36px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

/* 鼠标悬停效果 */
.el-tree-node__content:hover {
  background-color: #e9f5ff;
}

/* 当前选中节点样式 */
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ecf5ff;
  color: #409EFF;
  font-weight: 500;
}

/* 节点展开/折叠图标 */
.el-tree-node__expand-icon {
  color: #606266;
  font-size: 16px;
  transition: transform 0.3s;
}

.el-tree-node__expand-icon.expanded {
  transform: rotate(90deg);
}

/* 节点文本样式 */
.el-tree-node__label {
  font-size: 14px;
  margin-left: 6px;
}

/* 复选框样式 */
.el-checkbox__inner {
  border-radius: 3px;
}

/* 树线样式 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #409EFF;
  border-radius: 2px;
}

/* 折叠动画效果 */
.el-tree-node__children {
  transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-tree {
    font-size: 13px;
  }

  .el-tree-node__content {
    height: 32px;
    line-height: 32px;
  }
}
</style>
